<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/list.css" rel="stylesheet" />
		<script src="../../js/mui.min.js"></script>
		 <script src="../../js/app.js"></script>
		 <script src="../../js/common.js"></script>
		 <!--<link href="../../css/style.css" rel="stylesheet" />-->
		 <link href="../../css/icons-extra.css" rel="stylesheet"/>
		 <link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="../css/detail.css" type="text/css" />
		 		<style type="text/css">
		.speak{
			/*输入框居中漂浮*/
		position: fixed;
		width:100%;
		top:30%;
		/*left:50%;*/
		margin: auto auto;
		padding: 0 5px;
		text-align: center;
				 			}


/*div{
    width:200px;
    height:200px;
    background-color:#00ff00;
    border-radius:0 100px 0 0;
    transform:rotate(0deg);
    transition:transform 1s;
}*/

#add:active{
    transform:rotate(40deg);
    /*position: fixed;
    top: 0px;
    right: 0px;
    background: red;*/
    /*width:100px;
    /*height: 100px;*/
    /*transition:transform 1s;*/
}
		 		</style>
</head>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 class="mui-title"><span id="title">商品详情</span></h1><p id="titleright" style="float: right;font-size: 0.6em;">举报</p>
</header>

    <div class="mui-content" style="margin-bottom:100px">
    	<!--<div id="head" style="padding: 2px 10px;"></div>-->
    	<!--海报-->
    <div  style="width:100%;text-align:center" id="image">
    	<img  style="width:90%;" src="" onerror="this.onerror=null;this.src='../../images/iconfont-tianjia.png'" />
    </div>
    <!--<div id="blurb"></div>-->
    
    <div id="neirong" class="mui-content-padded"></div>
    

<div id="table" class="mui-content-padded"></div>
<div class="slide-box" id="picture"></div>
    <!--<div id="below" class="mui-content-padded"></div>-->
    <!--<li class="mui-content-padded" style="border-bottom:solid 1px #E3E3E3;"><span>创作团队</span></li>-->
    <!--<div class="slide-box" id="resume"></div>-->
    <!--<li class="mui-content-padded" style="border-bottom:solid 1px #E3E3E3;"><span>相关新闻</span></li>-->
    <!--<div class="slide-box" id="news"></div>-->
    <!--出品公司-->
      <!--项目概况表格-->
    <!--<div id="table" class="mui-content-padded"></div>-->
      <!--来源-->
    <li class="mui-content-padded" id="foot"><span>发布人</span></li>
    <li class="mui-content-padded"style="border-bottom: 1px solid #E3E3E3;">主题评论：</li>
		<div class="mui-content-padded" id="comment">
			 <!--评论信息-->
		</div>
    </div>
    <!--评论窗口-->
    <button  id="shoppingcart" style="display:block;position:fixed;right:30px;bottom:60px;background: #DD524D;color:#fff;border-radius:10px;padding: 5px;" >去结算
</button>
<!--<div  id="fabiao" style="display:block;position:fixed;right:30px;bottom:60px;background: #DD524D;color:#fff;border-radius:10px;padding: 5px;" >发表评论
</div>-->
<div id="speak" class="speak" style="display:none;background: #DDDDDD;">
	<p style="margin:auto auto;font-size: 1.2em;color:#EC971F">发表评论</p>
	<textarea id="content" type="text" placeholder="留言"></textarea>
	<div style="margin-top: -24px;border-radius:5px;">
	<input id="pubish" style="font-size: 18px;margin: 2px 5px;padding:0 10px;float: right;" value="确认" type="submit" onclick="javascript:(document.getElementById('fabiao').style.display='block')">
	<input  style="font-size: 18px;margin: 2px 5px;float: right;padding:0 10px;" value="取消" type="submit" onclick="javascript:(document.getElementById('speak').style.display='none');javascript:(document.getElementById('fabiao').style.display='block')">
	</div>
</div>
<!--<nav class="mui-bar mui-bar-tab">

    <a class="mui-tab-item">
    <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='100' >
  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
  <input class="mui-numbox-input" id="number" type="number" />
  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div></a>
<a class="mui-tab-item">
	<button class="mui-tab-label" id ="add" style="">加入购物车<span id="gouwuche"></span></button>
</a>
<a class="mui-tab-item">
	<button class="mui-tab-label" onclick="myStorage.setItem('shoppingcart','')">立即购买</button>

    </a>
</nav>-->

<nav class="mui-bar mui-bar-tab">
        <!--<span id="num"></span>-->
        <a id="num" class="mui-tab-item"></a>
        <a class="mui-tab-item">
        <!--<span class="mui-tab-label">合计：<span id="total">0</span>元</span>-->
	<button class="mui-tab-label" onclick="myStorage.setItem('shoppingcart','')">立即购买</button>
	<!--<button class="mui-tab-label" onclick="gowindow()">去结算</button>-->
    </a>
    <a class="mui-tab-item">
	<button class="mui-tab-label" id ="add" style="">加入购物车<span id="gouwuche"></span></button>
</a>
</nav>
<script type="text/javascript">

//	var 添加购物车
	var add=document.getElementById('add');

	var shoppingcart=document.getElementById('shoppingcart');
	shoppingcart.addEventListener("click",function () {
		//购物车功能
//		mui.openWindow('../admin/shoppingcart.html');
//确认订单功能
mui.openWindow('../admin/order_confirm.html');
  console.log("tap event trigger"+tid);
});
//	var tid=localStorage.itemdetailid;
//var btn = document.getElementById("fabiao");
////监听点击事件
//btn.addEventListener("click",function () {
//	 speak('',tid,'goods');
////	alert(tid);
//console.log("tap event trigger"+tid);
//});
//主图大图
function imageplay(image,tid){
	document.getElementById('image').getElementsByTagName('img')[0].src=home.uploads+'/img/item/'+image;
}


 
// function addorders(tid,title,money,share,repaytime,synopsis,user_id){
// 	var jsarr={};
//// 	alert(user_id+'uid'+tid+title+money+share);
// 	jsarr['tid']=tid;
// 	jsarr['title']=title;
// 	jsarr['money']=money;
// 	jsarr['share']=share;
// 	jsarr['repaytime']=repaytime;
// 	jsarr['synopsis']=synopsis;
// 	jsarr['user_ida']=user_id;
// 	localStorage.itembuy=JSON.stringify(jsarr);
// 	mui.openWindow('../admin/orders_publish.html');
// }
 //获取详情
function jsonarrfor(result){
	//添加购物车
		add.addEventListener("tap",function () {
//			alert(JSON.stringify(result));
//			myStorage.setItem('shoppingcart','');
//			alert('数据库'+myStorage.getItem('shoppingcart'));
//		var num=document.getElementById('number');
//		alert(result.shop_id);
//		var repeat = num.value;  // 限制执行次数
		//店铺
		var goods={};
		 goods[result.shop_id]={"shopname":result.shopname,
								"shop_id":result.shop_id
								};
		//商品
		goods[result.shop_id][result.id]={"user_id":result.user_id,
					"title":result.title,//标题
					"number":1,//订购数量
					"id":result.id,//id
					"price":result.price,//单价
					"poster":result.poster,//海报
					"stock":result.stock,//库存
					"chosen":'1'//购物车中状态=选中
				};
//		var goodsjson=goods;
//		alert(JSON.stringify(goods));
		var goodss=myStorage.getItem('shoppingcart')||'';
//		alert('收到'+goodss);
		if(goodss!='' && isJSON(goodss)){
			
		var goodsjson=JSON.parse(goodss);
			//找到店铺
			if(goodsjson[result.shop_id]){
				//商品数据更新
					goodsjson[result.shop_id][result.id]=goods[result.shop_id][result.id];
			}else{
				//添加店铺含商品
				goodsjson[result.shop_id]=goods[result.shop_id];
			}
		}else{
			goodsjson=goods;
		}
		
		myStorage.setItem('shoppingcart',JSON.stringify(goodsjson));
//		alert('读取数据库'+myStorage.getItem('shoppingcart'));
//		var timer = setInterval(function() {    
//		    if (repeat == 0) {
//		        clearInterval(timer);
////		        add.style='';
//		    } else {
//		    	num.value--;
//		        repeat--;
////		        num.value='0';
//		    }
//		}, 50);
	})

var classimg='';
var vals='';
	casestate='<span onclick="goto(\'chat\',\'user\',\'detail\','+result.user_id+')"style="font-size:0.6em;border-radius:25px;border:2px solid #a1a1a1;padding:5px 5px">聊聊<i class="mui-icon "></i></span>';

//发布日期
var createtime=new Date(parseInt(result.createtime) * 1000).format('yyyy年M月d日');
val='<div style="text-align:center"><h4>名称:'+result.title+'</h4><p  style="background: transparent;">单价:<span style="color:red">'+result.price+'元</span></p><p>已售:'+result.sold+' 件/库存:'+result.stock+'</p><p>'+casestate+'</p><h4>详情</h4><p><span id="synopsis">'+result.detail+'</span></p></div>';
//形象头像
if(result.poster && result.poster.length>6){
imageplay(result.poster,result.id);	
}

var head='<div style="font-size:1em;right:0;"><span  style="" onclick="goto(\'goods\',\'home\',\'goods\','+result.shop_id+')">商户：'+result.shopname+'</span></div>';
	var table='<li style="border-bottom:solid 1px #E8E8E8;"><span id="situation">'+head+'</span></li><div class="list-head" ><table><tr><td width="110px">名称</td><td>'+result.title+'</td></tr><tr><td width="110px">分类</td><td>'+result.classname+'</td></tr><tr><td>价格</td><td>'+result.price+'元</td></tr><tr><td>已售出</td><td>'+result.sold+' 件</td></tr><tr><td>剩余</td><td>'+(result.stock-result.sold)+'件</td></tr></table></div>';
var collecttitle=result.classname+':'+result.title;

document.getElementById('table').innerHTML=table;
document.getElementById('neirong').innerHTML=val;

var img="";
		if(result.img===null || result.img==='' || result.img==='undefined' ){
			img='';
		}else{
			if(result.img.indexOf(",")){//如果字符串里含有逗号。遍历分割
						var rpic=result.img.split(",");
				for(var ib=0;ib<rpic.length;ib++){//遍历图片
		img+='<li id="con"><div class="pic"><span><img src="'+home.uploads+'/img/goods/min'+rpic[ib]+'" onerror="this.onerror=null;this.src=\'../../datu.jpg\'" /></span></div></li>';
				}
			}else{//如果只有一个图片无需遍历
				img='<li id="con"><div class="pic" ><span><img  src="'+home.uploads+'/img/goods/min'+result.img+'" onerror="this.onerror=null;this.src=\'../../datu.jpg\'" /></span></div></li>';
			}
		}
		//图片队列
document.getElementById('picture').innerHTML=img;
var below='<div style="width:100%;height:35px;font-size:0.8em;border-bottom: 1px solid #E3E3E3;text-align:center;"><div style="width: 33%;float:left"onclick="speak()">留言：<span id="commentnum">'+result.comment+'</span></div><div style="width: 33%; float:left"onclick="zan('+result.id+',\'\',\'goods\')"><i class="fa fa-thumbs-o-up fa-1x"></i>：<span id="zannum">'+result.zan+'</span></div><div style="width: 33%;float:left"onclick="addcollect('+result.id+',\'goods\',\''+collecttitle+'\')">收藏：<span id="collectnum'+result.id+'">'+result.collect+'</span></div></div>';


document.getElementById('foot').innerHTML=below;
document.getElementById('titleright').innerHTML='<div id="report" style="margin-top:10px;float:right">'+result.report+'</div><div style="float:right"><select style="padding:10px;background-color:transparent;" onchange="report('+result.id+',\'goods\',this)"><option>投诉</option><option>色情</option><option>侵权</option><option>脏话</option><option>诽谤</option><option>低俗</option><option>虚假</option><option>其他</option></select></div>';
}


apptoken['tid']=tid;//获取主题详情id
apptoken['act']='detail';
//alert(tid);
mui.post(home.hos+'/goods?tid='+apptoken['tid'],apptoken,function(data){
	alert(data);
	if(isJSON(data)){
//      			alert(data);
		result=JSON.parse(data);//获取信息
		jsonarrfor(result);//加载详情信息
//		_relation(result.relation,result.relation_id);//加载关联信息
//		list_comment(result.id);//加载评论信息
		}else{
			alert(apptoken['tid']+'页面加载失败，或不存在，请重新尝试');
			return false;
    	}
})


	function add(tid,type,shop_id){
	   	var num = document.getElementById('number'+tid);//数量
	   	var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/ 
	   	if (!re.test(num.value)) {
	   		num.value=0;
	   		
	   	}
		var price=document.getElementById("price"+tid).innerText;
		var total=document.getElementById("total");
  		var checkbox = document.getElementById('checkbox'+tid);//数量
            if(type==='+'){
            	if(goodsjson[shop_id][tid].stock<=num.value){
            		alert('库存不足');
            		return false;
            	}
            	//数量+1
    			num.value = parseInt(num.value)+1;
    			//如果商品是选中状态合计金额会随着改变
    			if(checkbox.checked==true){
					total.innerHTML = parseInt(total.innerText)+parseInt(price);
				}
    		}else{
    			if(num.value>1){
    				//数量-1
    				num.value = parseInt(num.value)-1;
    				//如果商品是选中状态合计金额会随着改变
    				if(checkbox.checked==true){
						total.innerHTML = parseInt(total.innerText)-parseInt(price);
						
						//把购物车选中的商品数量-1
//							inparr[shop_id][tid].number=parseInt(inparr[shop_id][tid].number)-1;
					}
    			}
    		}
    		//g更新购物车商品的数量
    		goodsjson[shop_id][tid]["number"]=num.value;
//	    		totalone.innerHTML = parseInt(number.value)*parseInt(price.value);
    }
  </script>